<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-09-07 15:02:07
 * @LastEditTime : 2022-09-08 15:46:45
 * @FilePath     : \侦听器\watch\组合式API用法\侦听单个数据源\监听对象中某个属性的变化\APP.vue
-->
<template>
  <div>
    <div>{{obj.name}}</div>
    <div>{{obj.age}}</div>
    <button @click="changeName">改变值</button>
  </div>
</template>

<script>
import { reactive, watch } from 'vue';
export default {
  setup(){
    const obj = reactive({
      name:'zs',
      age:14
    });
    const changeName = () => {
      obj.name = 'ls';
    };
    //当使用 getter 函数作为源时，回调只在此函数的返回值变化时才会触发
    watch(() => obj.name,(name, prevName) => {  //第一个参数为一个getter函数
      console.log('监听的obj.name改变了')
    })
    return {
      obj,
      changeName,
    }
  }
}
</script>